<!--注册 页面-->
<template>
<!--todo 时间插件 https://www.jianshu.com/p/b1997400fc77-->
  <div id="register">
    manage
    <el-row>
      <el-col :span="20" :offset="12">
        <el-form :model="vipManage" status-icon  label-width="100px" class="demo-ruleForm">



          <el-form-item label="账号" prop="userId" >
            <el-input placeholder="请输入内容" v-model="vipManage.userId" class="input-with-select">
              <el-select v-model="vipManage.userId" slot="prepend" placeholder="请选择">
                <el-option :label="item.nickName" :value="item.id" v-for="(item,index) in page.user" :key="item.id"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="userPageQuery"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="startDate">
            <el-date-picker v-model="vipManage.startDate"
                              type="date"
              placeholder="选择日期" style="width:100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endDate" >
            <el-date-picker v-model="vipManage.endDate"
                              type="date"
                              placeholder="选择日期" style="width:100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="vip级别" prop="levelId" >
            <el-input placeholder="请输入内容" v-model="vipManage.levelId" class="input-with-select">
              <el-select v-model="vipManage.levelId" slot="prepend" placeholder="请选择">
                <el-option :label="item.level" :value="item.id" v-for="(item,index) in page.level" :key="item.id"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="levelPageQuery"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="vip卷" prop="voucherId">
            <el-input placeholder="请输入内容" v-model="vipManage.voucherId" class="input-with-select">
              <el-select v-model="vipManage.voucherId" slot="prepend" placeholder="请选择">
                <el-option :label="item.levelId+':'+item.id" :value="item.id" v-for="(item,index) in page.voucher" :key="item.id"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="voucherPageQuery"></el-button>
            </el-input>
          </el-form-item>

          <el-form-item label="可下载数量" prop="canDownNumber">
            <el-input placeholder="请输入内容" v-model="vipManage.canDownNumber" type="number" class="input-with-select"></el-input>
          </el-form-item>

          <el-form-item label="是否有效" prop="isAvailable">
            <el-input placeholder="请输入内容" v-model="vipManage.isAvailable" class="input-with-select" :disabled="true">
              <el-select v-model="vipManage.isAvailable" slot="prepend" placeholder="请选择">
                <el-option label="有效" value="yes" ></el-option>
                <el-option label="无效过期" value="no" ></el-option>
              </el-select>

            </el-input>
          </el-form-item>


          <el-form-item>
            <el-button type="danger" @click="submitForm('ruleForm')" v-if="addFlag">添加</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" v-if="saveFlag">保存</el-button>
            <el-button type="" @click="resetForm('ruleForm')" >返回</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>

</template>

<script>

  import {Handle} from "../../../constant/Handle";
  import {ResultStatus} from "../../../constant/ResultStatus";
  import {StringUtil} from "../../../../utils/StringUtil";
  import {ContentType} from "../../../constant/ContentType";
  import {ArticalPageReq} from "../../../req/ArticalPageReq";
  import {BasePageReq} from "../../req/BasePageReq";


  export default {
    data() {

      return {
        handle:this.$route.query.handle,
        id:this.$route.query.id,
        vipManage:{
          handle:'',
          id:'',
          userId:'',
          startDate: new Date(),
          endDate:'',
          levelId:'',
          canDownNumber:'',
          voucherId:'',
          isAvailable:'yes',


        },
        addFlag:true,
        saveFlag:true,
        page:{ //搜索
          user:[],
          voucher:[],
          level:[],
        }

      };
    },
    methods: {
      submitForm:async function(formName) {
        this.vipManage.handle = this.handle;
        this.$axios({
          method: 'post',
          url: 'vip/manage/save',
          data: JSON.stringify(this.vipManage),
          datatype: 'json',
          headers: {
            'content-type': 'application/json;charset=UTF-8'
          },
        }).then((response) => {

          let datas = response.data;
          if (datas.code == ResultStatus.SUCCESS) {
            this.$notify(StringUtil.success(datas.msg));
            this.$router.push({name:'vipManage'})

          } else {
            this.$notify(StringUtil.warning(datas.msg));
            return;
          }

        }).catch(function (error) {
          console.log(error)
          alert(error.data.msg);
          return false;
        });

      },
      resetForm(formName) {
        this.$router.push({name:'vipManage'})
      },
      /**
       * 查看用户
       */
      getUser(){
        this.vipManage.handle = Handle.QUERY;
        this.vipManage.id = this.id;

        this.$axios
          .post('/vip/manage/save',
            this.vipManage, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response) => {

            let datas = response.data;
            if (datas.code != ResultStatus.SUCCESS) {
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }
            this.vipManage = datas.data;
          })
          .catch((error) => {
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })
      },
      initComponent(){
        switch (this.handle) {
          case Handle.ADD:
                this.saveFlag = false;
                break;
                case Handle.UPDATE:
                  this.addFlag = false;
                  break;
                  default:
                    break;
        }
      },
      /**
       * 用户下拉搜索
       */
      userPageQuery(){
        let articaPageReq = new ArticalPageReq();
        articaPageReq.size = 10000;
        articaPageReq.page = 1;
        articaPageReq.descre  = this.vipManage.userId;
        this.$axios
          .post('/user/queryPage',
            articaPageReq, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response)=>{

            let datas = response.data;
            if(datas.code != ResultStatus.SUCCESS){
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }
            let datas2 = datas.data;
            this.page.user = datas2.list;
          })
          .catch((error)=>{
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })
      },
      /**
       * 级别分布搜索
       */
      levelPageQuery(){
        let basePageReq = new BasePageReq();
        basePageReq.size = 10000;
        basePageReq.page = 1;
        basePageReq.des  = this.vipManage.levelId;
        this.$axios
          .post('/vip/level/queryPage',
            basePageReq, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response)=>{

            let datas = response.data;
            if(datas.code != ResultStatus.SUCCESS){
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }
            let datas2 = datas.data;
            this.page.level = datas2.list;
          })
          .catch((error)=>{
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })
      },
      /**
       * 卷分布搜索
       */
      voucherPageQuery(){
        let basePageReq = new BasePageReq();
        basePageReq.size = 10000;
        basePageReq.page = 1;
        basePageReq.des  = this.vipManage.voucherId;
        this.$axios
          .post('/vip/voucher/queryPage',
            basePageReq, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response)=>{

            let datas = response.data;
            if(datas.code != ResultStatus.SUCCESS){
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }
            let datas2 = datas.data;
            this.totalSize =  datas2.totalSize;
            this.page.voucher = datas2.list;
          })
          .catch((error)=>{
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })
      },
      }

    ,
    components:{
    },
    mounted : async function() {
      this.getUser();
      this.initComponent();
     this.userPageQuery();
     this.levelPageQuery();
     this.voucherPageQuery()


    }
  }
</script>

<style>
  #register{
    width: 50%  }
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
